<template>
  <rx-dialog @ok="handleSubmit" @cancel="cancel">
    <rx-layout>
      <template #middle>
        <a-form ref="form" :model="mdl" :rules="rules" layout="vertical" class="rx-a-form-vertical">
          <a-row v-if="approvalType=='1'">
            <a-col :span="24">
              <a-form-item  :label="i18n('approve.mainDept','主部门')" name="mainDepName">
                  <div class="rx-handClose">
                      <a-input class="rx-inputs" style="width:100%"  readOnly v-model:value="mdl.mainDepName">
                          <template #addonAfter>
                               <span class="" @click="openGroup">
                                <SearchOutlined />
                                </span>
                          </template>

                      </a-input>
                  </div>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item  :label="i18n('approve.reason','审批理由')" name="note">
                <a-textarea v-model:value="mdl.note" :rows="8"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </template>
    </rx-layout>
  </rx-dialog>
</template>
<script>
  import OsInstApi from "@/common/api/user/osInst";
  import {BaseFormModel, RxDialog, RxGrid} from '@lowcode/jpaas-base-lib';
  import {ShareDialog} from '@lowcode/jpaas-share-component';
  export default {
    name: 'OsInstApplyInstEdit',
    props:["instId","approvalType","tenantId"],
    mixins:[BaseFormModel],
    components: {
      RxDialog,
      RxGrid
    },
    data(){
      return {
        rules: {
          mainDepName: [{required: true, message: "请选择主部门", trigger: 'change'}],
          note:[{required: true, message: "请输入审批理由", trigger: 'change'}],
        },
        mainDepId:''
      }
    },
    methods: {
      i18n(name, text, key) {
          return this.$ti18(name, text, "osInst", key);
      },
      save(values){
        var data={id:this.instId,isAgree:this.approvalType,applyNote:values.note,mainDepId:this.mainDepId};
        return OsInstApi.agreeOrRefuse(data);
      },
      openGroup(){
        var self_=this;
        ShareDialog.openGroupDialog({curVm: this,data:{single:true,dimId:'1',showDimId:true,tenantId:this.tenantId}, widthHeight: ['1000px','600px']},function(data){
          self_.mainDepId=data.groupId;
          Object.assign(self_.mdl,{'mainDepName': data.name});
        })
      }
    }
  }
</script>
<style scoped>
.rx-inputs{
    background-color: white;
}
.editforms .handClose:hover{
    border: 1px solid #1890ff;
    cursor: pointer;
}
.rx-handClose{
    position: relative;
}
.handClose{
    position: absolute;
    top: 3px;
    right: 0px;
    display: block;
    text-align: center;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-weight: 400!important;
    border-radius: 0px 5px 5px 0px;
    background-color: #f5f7fa;
    border: 1px solid #d9d9d9;
}
</style>
